<template>
  <div class="box section clearfix">
    <el-form :inline="true" style="text-align: left" ref="query" :model="query">
      <el-row class="query">
        <el-form-item label="执行分期月份：" prop="execMonth">
          <el-date-picker
            v-model="query.execMonth"
            type="month"
            placeholder="选择月"
            value-format="yyyy-MM"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item class="btn">
          <el-button type="danger" @click="clearFun" v-no-more-click
          >清空
          </el-button
          >
          <el-button type="primary" @click="queryFun" v-no-more-click
          >搜索
          </el-button
          >
        </el-form-item>
        <el-col :span="24">
          <el-form-item>
            <el-button
              size="small"
              type="primary"
              @click="toView('')"
              v-no-more-click
            >总分期人员表
            </el-button
            >
          </el-form-item>
          <el-form-item>
            <el-popconfirm
              title="确认生成下一期？"
              @onConfirm ="nextIssue()"
            >
              <el-button
                slot="reference"
                size="small"
                type="primary"
                v-no-more-click
              >生成下一期
              </el-button
              >
            </el-popconfirm>

          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :data="tableData"
      border
      stripe
      style="width: 100%"
    >
      <el-table-column
        label="执行分期月"
        align="center"
        prop="execMonth"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="states"
        label="总分期笔数"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="allMonthlyMoney"
        label="月分期总金额（元）"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="settleNums"
        label="结清笔数"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="allSettleMoney"
        label="担保结清费用(元)"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="risk"
        label="风险备付金"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column fixed="right" label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="toView(scope.row)"
            style="color: #3B9DF8"
            v-no-more-click
          >查看
          </el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--分页控件-->
    <div class="pagination">
      <span class="title">小计：共{{ this.total }}条数据</span>
      <el-pagination
        background
        layout="total,prev, pager, next, sizes"
        :total="total"
        :page-size="query.pageSize"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>

  </div>
</template>

<script>
import {
  fqList,
  nextIssue
} from "../../../src/assets/js/api";
import { checkPermiss } from "../../assets/js/utlis";

export default {
  name: "researchersInstallment",
  data() {
    return {
      query: {
        pageSize: 10,
        pageNum: 1,
        execMonth: ""
      },
      tableData: [],
      total: 10,
      pages: 0,
      currentPage: 1,
      golbalPermissions: [],

    };
  },
  created() {
    this.getList();
    this.golbalPermissions = localStorage.getItem("permissions").split(",");
  },
  computed: {
    userInfoExport: function() {
      return checkPermiss("business:guaranteeStaging:list", this.golbalPermissions);
    }
  },
  methods: {
    //生成下一期
    nextIssue(){
      nextIssue()
      //   .then(()=>{
      //  this.getList();
      // })
    },
    //查看
    toView(item){
      if(item){
        this.$router.push(`/Index/paymentInstallment?execMonth=${item.execMonth}`)
      }else {
        this.$router.push(`/Index/paymentInstallment`)
      }

    },
    //   获取数据
    getList() {
      fqList(this.query).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.records;
          this.currentPage = res.data.current;
          this.total = res.data.total;
          this.pages = res.data.pages;
        }
      });
    },

    //   清空按钮
    clearFun() {
      this.$refs["query"].resetFields();
      this.query.execMonth = "";
      this.getList();
    },
    // 搜索按钮
    queryFun() {
      this.query.pageNum = 1;
      this.getList();
    },
    //分页
    handleCurrentChange(cpage) {
      this.query.pageNum = cpage;
      this.getList();
    },
    handleSizeChange(psize) {
      this.query.pageSize = psize;
      this.getList();
    },

  }
};
</script>

<style scoped type="less">
::v-deep .el-table td {
  padding: 10px 0;
}

::v-deep .el-table th {
  padding: 10px 0;
}

.query ::v-deep .el-input__inner {
  height: 32px;
}

.query ::v-deep .el-input__icon {
  line-height: 32px;
}

.query ::v-deep .el-form-item {
  /*width: 370px;*/
}

.query ::v-deep .vue-treeselect__control {
  line-height: 30px;
  height: 32px;
}

.query ::v-deep .vue-treeselect__single-value,
.query ::v-deep .vue-treeselect__placeholder {
  line-height: 30px;
}

::v-deep .btn .el-button {
  line-height: 0;
  width: 80px;
  height: 32px;
}

::v-deep .el-table th > .cell {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: rgba(59, 157, 248, 0.1);
}

.box {
  position: relative;
  padding: 20px 20px 50px 20px;
  background: #fff;
}

::v-deep .el-pagination {
  position: absolute;
  right: 0;
  margin-top: 20px;
}

::v-deep .el-pagination__total {
  visibility: hidden;
}

.title {
  font-family: Microsoft YaHei;
  font-size: 12px;
  font-weight: 400;
  line-height: 21px;
  position: absolute;
  left: 0;
  margin-top: 15px;
  color: rgba(51, 51, 51, 1);
}

/deep/ .indexClass {
  position: relative;
}

.indexBox {
  position: absolute;
  top: 10px;
  right: 20%;
  /*font-size: 18px;*/
  /*color: red;*/
}

</style>
